<template>
  <div class="medical-system">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">
        <div class="logo-icon">璟</div>
        <span class="logo-text">璟荟医疗</span>
      </div>
      <div class="welcome-message">欢迎选择璟荟医疗</div>
      <div class="user-actions">
        <button class="action-btn"><i class="icon-bell"></i></button>
        <button class="action-btn"><i class="icon-message"></i></button>
        <button class="action-btn"><i class="icon-settings"></i></button>
        <div class="user-avatar">
          <img src="https://picsum.photos/id/1005/40/40" alt="用户头像">
        </div>
      </div>
    </header>

    <div class="main-container">
      <!-- 侧边导航 -->
      <aside class="sidebar">
        <nav class="menu">
          <router-link to="/" class="menu-item">
            <i class="icon-home"></i>
            <span>首页</span>
          </router-link>
          <router-link to="/user" class="menu-item">
            <i class="icon-user"></i>
            <span>用户管理</span>
          </router-link>
          <router-link to="/data" class="menu-item active">
            <i class="icon-database"></i>
            <span>数据管理</span>
          </router-link>
          <router-link to="/add" class="menu-item">
            <i class="icon-add"></i>
            <span>新增管理</span>
          </router-link>
          <router-link to="/warning" class="menu-item">
            <i class="icon-alert"></i>
            <span>预警管理</span>
          </router-link>
          <router-link to="/consult" class="menu-item">
            <i class="icon-comment"></i>
            <span>在线沟通</span>
          </router-link>
          <router-link to="/health" class="menu-item">
            <i class="icon-heart"></i>
            <span>健康指导</span>
          </router-link>
          <router-link to="/visit" class="menu-item">
            <i class="icon-id"></i>
            <span>回访管理</span>
          </router-link>
          <router-link to="/medicine" class="menu-item">
            <i class="icon-pills"></i>
            <span>用药提醒</span>
          </router-link>
          <router-link to="/points" class="menu-item">
            <i class="icon-star"></i>
            <span>积分系统</span>
          </router-link>
          <router-link to="/analysis" class="menu-item">
            <i class="icon-chart"></i>
            <span>数据分析</span>
          </router-link>
          <router-link to="/statistics" class="menu-item">
            <i class="icon-bar-chart"></i>
            <span>数据统计</span>
          </router-link>
        </nav>
      </aside>

      <!-- 主内容区 -->
      <main class="content">
        <!-- 数据标签页 -->
        <div class="data-tabs">
          <button class="tab-btn active">血糖记录</button>
          <button class="tab-btn">血压记录</button>
          <button class="tab-btn">尿酸</button>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-panel">
          <div class="filter-row">
            <div class="filter-group">
              <label>日期:</label>
              <input type="date" class="form-control date-start">
              <span class="date-separator">至</span>
              <input type="date" class="form-control date-end">
            </div>

            <div class="filter-group">
              <label>测量组织:</label>
              <select class="form-control">
                <option>全部</option>
                <option>社区卫生服务中心</option>
                <option>医院</option>
                <option>家庭</option>
              </select>
            </div>

            <div class="filter-group">
              <label>辖区:</label>
              <select class="form-control">
                <option>全部</option>
                <option>辖区一</option>
                <option>辖区二</option>
                <option>辖区三</option>
              </select>
            </div>
          </div>

          <div class="filter-row">
            <div class="filter-group">
              <label>血糖区间:</label>
              <input type="number" class="form-control" placeholder="开始值">
              <span class="range-separator">-</span>
              <input type="number" class="form-control" placeholder="结束值">
            </div>

            <div class="filter-group">
              <label>条件:</label>
              <select class="form-control">
                <option>糖化血红蛋白≤6.5%</option>
                <option>空腹血糖≥7.0mmol/L</option>
                <option>随机血糖≥11.1mmol/L</option>
              </select>
            </div>

            <div class="filter-actions">
              <button class="btn primary-btn">搜索</button>
              <button class="btn secondary-btn">重置条件</button>
            </div>
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="data-table-container">
          <table class="data-table">
            <thead>
            <tr>
              <th>姓名</th>
              <th>身份证号</th>
              <th>性别</th>
              <th>手机号</th>
              <th>检测时间</th>
              <th>检测阶段</th>
              <th>血糖值</th>
              <th>结果</th>
              <th>血糖均值</th>
              <th>管控医师</th>
              <th>责任单位</th>
              <th>回访记录</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in medicalData" :key="index" :class="{'row-alt': index % 2 === 0}">
              <td>{{ item.name }}</td>
              <td>{{ item.idCard }}</td>
              <td>{{ item.gender }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ item.testTime }}</td>
              <td>{{ item.testStage }}</td>
              <td>{{ item.bloodSugar }}</td>
              <td>
                <span :class="resultClass(item.result)">{{ item.result }}</span>
              </td>
              <td>{{ item.average }}</td>
              <td>{{ item.doctor }}</td>
              <td>{{ item.unit }}</td>
              <td class="action-buttons">
                <span class="badge">已回访</span>
                <button class="text-btn">详情</button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <div class="total-count">共 608 条数据</div>
          <div class="page-controls">
            <button class="page-btn prev"><</button>
            <button class="page-btn active">1</button>
            <button class="page-btn">2</button>
            <button class="page-btn">3</button>
            <button class="page-btn">4</button>
            <button class="page-btn">5</button>
            <button class="page-btn next">></button>
          </div>
          <div class="page-size">
            <span>每页显示:</span>
            <select class="form-control">
              <option>10</option>
              <option selected>20</option>
              <option>50</option>
              <option>100</option>
            </select>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 模拟医疗数据
const medicalData = ref([
  {
    name: '张三',
    idCard: '370782198203222233',
    gender: '男',
    phone: '13788980997',
    testTime: '2025-04-01 07:37',
    testStage: '早餐前',
    bloodSugar: '13.8',
    result: '偏高',
    average: '3.9-6.1',
    doctor: '张家园',
    unit: '张仲景主任',
  },
  {
    name: '张三',
    idCard: '370782198203222233',
    gender: '男',
    phone: '13788980997',
    testTime: '2025-04-01 13:17',
    testStage: '晚餐前',
    bloodSugar: '4.3',
    result: '正常',
    average: '3.9-6.1',
    doctor: '张家园',
    unit: '张仲景主任',
  },
  {
    name: '张三',
    idCard: '370782198203222233',
    gender: '男',
    phone: '13788980997',
    testTime: '2025-04-01 19:23',
    testStage: '晚餐后',
    bloodSugar: '2.1',
    result: '偏低',
    average: '3.9-6.1',
    doctor: '张家园',
    unit: '张仲景主任',
  },
  {
    name: '张三',
    idCard: '370782198203222233',
    gender: '男',
    phone: '13788980997',
    testTime: '2025-04-02 07:25',
    testStage: '早餐前',
    bloodSugar: '12.3',
    result: '偏高',
    average: '3.9-6.1',
    doctor: '张家园',
    unit: '张仲景主任',
  },
  {
    name: '张三',
    idCard: '370782198203222233',
    gender: '男',
    phone: '13788980997',
    testTime: '2025-04-02 18:45',
    testStage: '晚餐后',
    bloodSugar: '12.3',
    result: '偏高',
    average: '3.9-6.1',
    doctor: '张家园',
    unit: '张仲景主任',
  }
]);

// 结果状态样式
const resultClass = (result) => {
  switch(result) {
    case '偏高': return 'result-high';
    case '偏低': return 'result-low';
    default: return 'result-normal';
  }
};

// 路由
const router = useRouter();
</script>

<style scoped>
/* 基础样式 */
.medical-system {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  color: #333;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 18px;
  color: #1890ff;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background-color: #1890ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.welcome-message {
  color: #666;
  font-size: 14px;
  font-weight: bolder;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.action-btn {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.2s;
}

.action-btn:hover {
  background-color: #f5f5f5;
  color: #1890ff;
}

.user-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #eee;
}

/* 主容器 */
.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏 */
.sidebar {
  width: 200px;
  background-color: #001529;
  color: rgba(255,255,255,0.7);
  overflow-y: auto;
}

.menu {
  padding-top: 20px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all 0.2s;
  gap: 12px;
}

.menu-item:hover, .menu-item.active {
  background-color: #1890ff;
  color: white;
}

/* 内容区 */
.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f5f5;
}

/* 数据标签页 */
.data-tabs {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
  background-color: white;
  padding-left: 10px;
}

.tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  position: relative;
  font-size: 14px;
  transition: color 0.2s;
}

.tab-btn:hover {
  color: #1890ff;
}

.tab-btn.active {
  color: #1890ff;
  font-weight: 500;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
}

/* 筛选面板 */
.filter-panel {
  background-color: white;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group label {
  color: #666;
  font-size: 14px;
  white-space: nowrap;
}

.date-separator, .range-separator {
  color: #999;
  padding: 0 5px;
}

.filter-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.primary-btn {
  background-color: #1890ff;
  color: white;
}

.primary-btn:hover {
  background-color: #096dd9;
}

.secondary-btn {
  background-color: #f5f5f5;
  color: #666;
}

.secondary-btn:hover {
  background-color: #e8e8e8;
}

.text-btn {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
}

.text-btn:hover {
  background-color: rgba(24, 144, 255, 0.1);
}

/* 表单控件 */
.form-control {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  width: 140px;
  transition: border-color 0.2s;
}

.form-control:focus {
  border-color: #1890ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 表格样式 */
.data-table-container {
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th, .data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
}

.data-table th {
  background-color: #f5f5f5;
  font-weight: 500;
  color: #666;
}

.row-alt {
  background-color: #fafafa;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

/* 结果状态样式 */
.result-high {
  color: #f5222d;
}

.result-low {
  color: #faad14;
}

.result-normal {
  color: #52c41a;
}

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  font-size: 14px;
}

.total-count {
  color: #666;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background-color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.page-btn:hover:not(.active) {
  border-color: #1890ff;
  color: #1890ff;
}

.page-btn.active {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.page-size .form-control {
  width: auto;
}

/* 图标样式 */
[class^="icon-"] {
  width: 1em;
  height: 1em;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='currentColor' d='M946.5 505L560.1 118.8l-25.9-25.9a31.93 31.93 0 0 0-45.2 0L77.5 505c-12 12-18.8 28.3-18.8 45.3 0 35.3 28.7 64 64 64h43.4V908c0 17.7 14.3 32 32 32H541c17.7 0 32-14.3 32-32V614.3h43.4c35.3 0 64-28.7 64-64 0-17-6.7-33.3-18.8-45.3z'/%3E%3C/svg%3E");
}

.icon-user, .icon-database, .icon-add, .icon-alert, .icon-comment, .icon-heart, .icon-id, .icon-pills, .icon-star, .icon-chart, .icon-bar-chart, .icon-bell, .icon-message, .icon-settings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='currentColor' d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'/%3E%3C/svg%3E");
}
</style>